<template>
  <div style="padding: 20px">
    <h1>视频资源管理</h1>
    <div class="resource-header">
      <div>
        <label>视频名称: </label>
        <el-input
          v-model="formData.resource_name"
          style="width: 240px"
          placeholder="Please input"
          clearable
        />
      </div>
      <div>
        <label>创建者姓名: </label>
        <el-input
          v-model="formData.username"
          style="width: 240px"
          placeholder="Please input"
          clearable
        />
      </div>
      <div>
        <label>视频创建时段: </label>
        <el-date-picker
          v-model="times"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          @change="handleTimes"
          clearable
        />
      </div>
      <div style="display: flex">
        <el-button type="primary" icon="el-icon-search" @click="handleSelect">查询</el-button>
        <el-button size="normal" icon="el-icon-refresh" @click="handleClear">
          重置
        </el-button>
      </div>
    </div>
    <div>
      <el-tabs v-model="activeTab" @tab-click="handleTabChange">
        <el-tab-pane label="全部" name="all">
          <VideoList :data="tableData"/>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="pending">
          <VideoList :data="tableData"/>
        </el-tab-pane>
        <el-tab-pane label="已通过" name="approved">
          <VideoList :data="tableData"/>
        </el-tab-pane>
        <el-tab-pane label="未通过" name="rejected">
          <VideoList :data="tableData"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="block juzhong">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNum"
        :page-sizes="[10, 50, 100, 150]"
        :page-size="formData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>

</template>


<script>
import VideoList from "@/views/resource/component/VideoList.vue";
import {fetchVideos} from "@/api/video";
import {Message} from "element-ui";

export default {
  components: {
    VideoList
  },

  data() {
    return {
      times: '',
      total: 0,
      tableData: [],
      activeTab: 'all',// 当前激活的Tab
      formData: {
        username: '',
        resource_name: '',
        start_time: '',
        end_time: '',
        ispass: null,
        pageNum: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
    handleSelect() {
      this.fetchTable()
    },
    //转换成过滤tab条件
    getStatusFilter(tabType) {
      switch (tabType) {
        case 'all':
          return null;
        case 'pending':
          return 0;
        case 'approved':
          return 1;
        case 'rejected':
          return 2;
        default:
          return null;
      }
    },
    //处理时间
    handleTimes(val) {
      if (val && val.length === 2) {
        const formattedTimes = val.map(date => this.formatDate(date));
        this.formData.start_time = formattedTimes[0];
        this.formData.end_time = formattedTimes[1];
      } else {
        this.formData.start_time = null;
        this.formData.end_time = null;
      }
    }
    ,
    //转换时间格式
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    ClearPageSetting() {
      this.formData.pageNum = 1;
      this.formData.pageSize = 10;
    },
    ClearPage() {
      this.formData = {};
      this.times = []
    },
    handleClear() {
      this.ClearPage();
      this.fetchTable();
    },
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.fetchTable();
    }
    ,
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.fetchTable();
    },
    async fetchTable() {
      // const currentTab = this.tabData[type];
      const data = {
        pageSize: this.formData.pageSize,
        pageNum: this.formData.pageNum,
        username: this.formData.username,
        resource_name: this.formData.resource_name,
        start_time: this.formData.start_time,
        end_time: this.formData.end_time,
        ispass: this.getStatusFilter(this.activeTab)
      }
      const rep = await fetchVideos(data);
      this.tableData = rep.items
      console.log("传入数据", data);
      // const rep = await this.$store.dispatch("resource/getvideos", data)

      // this.tabData[type].tableData = rep.items;
      // console.log("tabData[type].tableData", this.tabData.all.tableData)
      this.total = rep.total;
    },
    handleTabChange(tab) {
      this.tableData = []
      this.ClearPageSetting()
      this.ClearPage()
      this.fetchTable()
    }
  },

  created() {
    this.fetchTable('all'); // 默认加载全部数据
  }
}
</script>

<style scoped lang="scss">

.resource-header {
  display: flex;
  margin: 20px 0 20px;
  padding: 0 20px;
  justify-content: start;
  align-items: center;
}

.demo-tabs {
  padding: 30px;
  background: rgba(255, 223, 187, 0);
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: rgba(255, 0, 0, 0.7);
  font-size: 32px;
  font-weight: 600;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 30px;
}

.el-input {
  margin-right: 10px;
}

</style>
